<template>
<div class="form-cell">
  <van-field readonly clickable name="picker" :value="pickerValue" :label="label" :placeholder="placeholder || '请选择'"
    @click="showBlank"/>
  <van-popup v-model="showPicker" position="bottom">
    <van-picker v-model="result" show-toolbar :columns="option" @confirm="onConfirm" @cancel="showPicker = false"/>
  </van-popup>
</div>
</template>

<script>
export default {
  props: [ 'label', 'value', 'placeholder', 'option' ],
  data() {
    return {
      result: [],
      pickerValue: '',
      showPicker: false,
      icon: '-'
    } 
  },
  watch: {
    value() {
      if (this.value && this.value.length > 0) {
        this.pickerValue = this.value.join(this.icon);
        return ;
      }
      this.pickerValue = '';
    }
  },
  methods: {
    onConfirm(label, index) {
      this.pickerValue = label.join(this.icon);
      this.$emit('input', JSON.parse(JSON.stringify(label)));
      this.showPicker = false;
    },
    showBlank() {
      this.result = this.value ? JSON.parse(JSON.stringify(this.value)) : [];
      this.showPicker = true;
    }
  },
  mounted() {
    if (this.value && this.value.length > 0) {
      this.pickerValue = this.value.join(this.icon);
    }
  }
}
</script>
